import { useContext, useEffect, useState } from 'react'

import Smalltitleitem from '../../../components/smalltitleitem'
import { Coxt } from '../../home/index'

import './index.css'

let fallback_caches = {}

export default function () {

    // 全局数据

    const { caches, cachesFn } = useContext(Coxt)

    // data

    const [val, setVal] = useState('')

    // mounted / update

    useEffect(() => {
        if (caches['fallback']) {
            caches['fallback'].val ? setVal(() => caches['fallback'].val) : ''
        }
        return () => {
            cachesFn(fallback_caches, 'fallback')
        }
    }, [])

    useEffect(() => {
        fallback_caches.val = val
    }, [val])

    return (
        <div className='fallback'>
            <div style={{ padding: 20 }}>
                <Smalltitleitem title="提交反馈" />
                <div className='shadows' style={{ padding: 20, marginBottom: 20, border: '1px solid #ccc', borderRadius: '15px', backgroundColor: '#eee' }}>
                    <textarea value={val} name="" id="" cols="30" rows="10" placeholder='写入您宝贵的建议' maxLength={1000} style={{ width: '100%', height: 100, resize: 'none', border: 'none', backgroundColor: 'transparent' }} onChange={(e) => setVal(() => e.target.value)}></textarea>
                </div>
                <button className='infochangebutton-fallback'>提交</button>
            </div>
        </div>
    )
}